<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>添加菜单项</title>
		<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
		<style>
			.icon-item:hover {
				color: #2D8CF0;
				background: #ccc;
			}

			.icon-item {
				font-size: 32px;
				color: #444;
				padding: 1rem;
				cursor: pointer;
				border: 1px solid #ccc;
			}

			.activeicon {
				color: #2D8CF0;
				background: #ccc;
			}

			.infinite-list {
				overflow: auto;
				border: 1px solid #DCDFE6;
				padding: 0.2rem;
				border-radius: 4px;
				max-height: 10rem;
				max-width: 51rem;
			}
		</style>
	</head>
	<body>
		<el-card class="box-card">
			<el-form :label-position="labelPosition" :model="resource" :rules="rules" class="demo-ruleForm" id="form"
			         label-width="100px"
			         ref="resource">
				<el-form-item label="菜单项父级名称" prop="pid" v-if="!isModify">
					<el-input :disabled="true" v-model="resource.pname"></el-input>
				</el-form-item>
				<el-form-item label="菜单项父级id" prop="pid" style="display: none;" v-if="!isModify">
					<el-input :disabled="true" v-model="resource.pid"></el-input>
				</el-form-item>
				<el-form-item label="菜单项id" prop="id" style="display: none;" v-if="isModify">
					<el-input :disabled="true" v-model="resource.id"></el-input>
				</el-form-item>
				<el-form-item label="菜单项名称" prop="name">
					<el-input v-model="resource.name"></el-input>
				</el-form-item>
				<el-form-item label="菜单项URL(填写相对路径)" prop="url">
					<el-input v-model="resource.url"></el-input>
				</el-form-item>
				<el-form-item label="菜单图标" prop="icon">
					<el-input style="display: none;" v-model="resource.icon"></el-input>
					<div class="infinite-list" style="overflow: auto;display: flex;flex-flow: wrap;"
					     v-infinite-scroll="loadicon">
						<div :class="['icon-item',i.isActive ? 'activeicon' : '']" v-for="i in icon.iconList">
							<i :class="[i.name]" @click="choseIcon(i)"></i>
						</div>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button @click="submitForm('resource')" type="primary">提交</el-button>
					<el-button @click="resetForm('resource')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</body>
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="/res/sa.js"></script>
	<script type="text/javascript">
        window.setData = function (data, modify) {
            if (!data) return;
            let formdata = {
                name: data.name,
                url: data.url,
                id: data.id,
                icon: data.icon
            };
            if (!modify) {
                formdata = {
                    pid: data.id,
                    pname: data.name,
                };
            }
            let resource = new Vue({
                el: "#form",
                data: {
                    isModify: modify,
                    labelPosition: "top",
                    resource: formdata,
                    icon: {
                        pagenum: 1,
                        pagesize: 30,
                        iconList: [],
                        count: 31,
                    },
                    rules: {
                        name: [
                            {required: true, message: '请输入菜单项名称', trigger: 'blur'},
                            {min: 0, max: 15, message: '长度不超过 15 个字符', trigger: 'blur'}
                        ],
                        icon: [
                            {required: true, message: '请选择图标', trigger: 'blur'},
                        ],
                        url: [
                            {required: false, message: '请输入菜单项URL(填写相对路径,如果留空则是普通菜单节点)', trigger: 'blur'}
                        ],
                        pid: [
                            {required: true, message: '出现错误请重试', trigger: 'submit'}
                        ],
                        pname: [
                            {required: true, message: '出现错误请重试', trigger: 'submit'}
                        ]
                    }
                },
                methods: {
                    submitForm(formName) {
                        this.$refs[formName].validate((valid) => {
                            if (valid) {
                                let data = JSON.stringify(this.$refs[formName].model);
                                if (!this.isModify) {
                                    //新增时
                                    $.post("/resource", this.$refs[formName].model, function (data, status, xhr) {
                                        if (data && data.state) {
                                            layer.alert('添加成功', {icon: 1}, function (index) {
                                                layer.close(index);
                                                let curr_index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                                parent.layer.close(curr_index); //再执行关闭
                                                parent.refreshTreeData();
                                            });
                                        }
                                    }, "json");
                                } else {
                                    //修改时
                                    // $.ajax({
                                    //     url: '/resource',
                                    //     type: 'PUT',
                                    //     data: JSON.stringify(this.$refs[formName].model),
                                    //     success: function (data) {
                                    //         if (data && data.state) {
                                    //             layer.alert('更新成功', {icon: 1}, function (index) {
                                    //                 layer.close(index);
                                    //                 let curr_index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                    //                 parent.layer.close(curr_index); //再执行关闭
                                    //                 parent.refreshTreeData();
                                    //             });
                                    //         }
                                    //     }
                                    // });
                                    sa.put('/resource', JSON.stringify(this.$refs[formName].model), function (data) {
                                        if (data && data.state) {
                                            layer.alert('更新成功', {icon: 1}, function (index) {
                                                layer.close(index);
                                                let curr_index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                                parent.layer.close(curr_index); //再执行关闭
                                                parent.refreshTreeData();
                                            });
                                        }
                                    })
                                }
                            } else {
                                alert('出现错误!');
                                return false;
                            }
                        });
                    },
                    resetForm(formName) {
                        this.$refs[formName].resetFields();
                    },
                    choseIcon(arg) {
                        this.icon.iconList.forEach(ele => {
                            ele.isActive = false
                        });
                        arg.isActive = true;
                        this.resource.icon = arg.name;
                        this.resource = JSON.parse(JSON.stringify(this.resource));
                    },
                    loadicon(arg) {
                        if (this.icon.pagenum >= (this.icon.count / this.icon.pagesize) + 1) {
                            return;
                        }
                        sa.get("/icon/list", {
                            pagesize: this.icon.pagesize,
                            pagenum: this.icon.pagenum
                        }, function (res) {
                            if (res && res.state && res.data) {
                                console.log(res.data);
                                this.icon.iconList = this.icon.iconList.concat(res.data.data);
                                this.icon.count = res.data.count;
                                if (this.icon.pagenum < (this.icon.count / this.icon.pagesize) + 1) {
                                    this.icon.pagenum += 1;
                                }
                            }
                        }.bind(this))
                    }
                }
            })
        }
	</script>
</html>